<template>
	<view class="container">
		<navbar-back-button></navbar-back-button>
		<view class="header">
			<image src="/static/images/attendance/bg.png" mode="scaleToFill"></image>
			<view class="user-box">
				<view class="avatar">
					<image :src=userimg></image>
				</view>
				<view class="nickname">
					{{username}}
				</view>
				<view class="rule">
					签到规则
				</view>
			</view>
		</view>
		<view style="padding: 0 30rpx;">
			<view class="integral-box">
				<view class="title">当前积分</view>
				<view v-model="signIntegral" class="value">{{signIntegral}}</view>
			<!-- 	<button type="primary" class="btn" @tap="attendance" @click="up">签到</button> -->
				<button type="primary" class="btn" @click="up()" >签到</button>
			</view>
		 </view>
	
	</view>
</template>

<script>

	import {
		mapState
	} from 'vuex'
	import navbarBackButton from '@/components/navbar-back-button'
	import uniCalendar from '@/pages/attendance/uni-calendar/uni-calendar'
	import modal from '@/components/modal/modal'
    import User from'../../main.js'
	export default {
		components: {
			navbarBackButton,
			uniCalendar,
			modal
		},
		data() { 
			return {
				customPoints: {},
				attendanceModalVisible: false,
				attendanceList: [],
				todayAttendance: {},
				startDate: '',
				endDate: '',
				signIntegral: "", //定义了用户的剩余积分
				userId:User.userId,
				userdays:0  ,//用户连续签到时间
				username:'',
				userimg:''
			}
		},
		created() {
		  this.userDate()
	      this.start()
		},

		async onLoad() {
			this.customPoints = await this.$api('customPoints'),
		  this.attendanceList = await this.$api('attendanceList')
			this.todayAttendance = await this.$api('todayAttendance')
			const date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth()
			this.startDate = `${year}-${month}-01`
		},
		computed: {
			...mapState(['member'])
		},
	   
		methods: {
			attendance() {
				this.attendanceModalVisible = true
			},
			
			start:function(){
					  this.$http("Sign/sign/" + this.userId).then(
					  	(res) => {
					  		console.log(res)
					  		this.signIntegral = res[1].data.data.signIntegral //把查询结果放在signIntegral中
					  	}
					  )
			}
			,
		  up:function(){
			  this.$http("Sign/in/"+ this.userId).then(
			  	(res) => {
			  		console.log(res)
			    if(res[1].data.code==200){
					wx.showModal({
					 title: '提示',
					 content: "签到成功！！",
					 success: function(res) {
					  if (res.confirm) {
					   console.log('用户点击确定')
					  }
					 }
					})
					  this.start()
				}else{
					wx.showModal({
					 title: '提示',
					 content:res[1].data.msg,
					 success: function(res) {
					  if (res.confirm) {
					   console.log('用户点击确定')
					  }
					 }
					})
				}
			  	}
			  )
		     }
           ,
		   //查询对应账号的用户信息
		   userDate:function(){
			   this.$http("Login/login/"+this.userId).then(
			   res=>{
				   console.log(res)
				   this.username=res[1].data.data.userName
				   this.userimg=res[1].data.data.user_avatarUrl
			   }
			   )
		   }

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 33.333vh;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.user-box {
			position: absolute;
			width: 100%;
			top: var(--status-bar-height);
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			color: #FFFFFF;

			.avatar {
				margin-left: 30rpx;
				background-color: #FFFFFF;
				padding: 6rpx;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
				}
			}

			.nickname {
				font-size: $font-size-lg;
				flex: 1;
			}

			.rule {
				font-size: $font-size-sm;
				border-radius: 50rem 0 0 50rem;
				background-color: rgba($color: #ffffff, $alpha: 0.3);
				padding: 10rpx 30rpx;
			}
		}
	}

	.integral-box {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -70rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);

		.title {
			font-size: $font-size-sm;
			color: $text-color-base;
			margin: 20rpx 0 30rpx;
		}

		.value {
			font-size: 46rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.btn {
			font-size: $font-size-lg;
			color: #FFFFFF;
			border-radius: 50rem !important;
			width: 70%;
		}
	}

	/deep/.uni-calendar {
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	}

	.attendance-modal {
		.modal-header {
			width: 100%;
			margin-top: -180rpx;
			position: relative;

			image {
				width: 100%;
			}
		}

		.modal-content {
			height: 200rpx;
		}

		.btn {
			width: 100%;
			border-radius: 50rem;
			font-size: $font-size-lg;
		}
	}
</style>
